<template>
  <div class="demo">
    <div class="demo-title">抽屉表单</div>
    <div class="demo-content">
      <Button type="primary" @click="showDrawer">
        <template #icon><PlusOutlined /></template> New account
      </Button>
      <Drawer
        v-model:visible="open"
        title="Create a new account"
        :width="720"
        :open="open"
        :body-style="{ paddingBottom: '80px' }"
        :footer-style="{ textAlign: 'right' }"
        @close="onClose"
      >
        <Form :model="form" :rules="rules" layout="vertical">
          <Row :gutter="16">
            <Col :span="12">
              <Form.Item label="Name" name="name">
                <Input v-model:value="form.name" placeholder="Please enter user name" />
              </Form.Item>
            </Col>
            <Col :span="12">
              <Form.Item label="Url" name="url">
                <Input
                  v-model:value="form.url"
                  style="width: 100%"
                  addon-before="http://"
                  addon-after=".com"
                  placeholder="please enter url"
                />
              </Form.Item>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col :span="12">
              <Form.Item label="Owner" name="owner">
                <Select v-model:value="form.owner" placeholder="Please a-s an owner">
                  <SelectOption value="xiao">Xiaoxiao Fu</SelectOption>
                  <SelectOption value="mao">Maomao Zhou</SelectOption>
                </Select>
              </Form.Item>
            </Col>
            <Col :span="12">
              <Form.Item label="Type" name="type">
                <Select v-model:value="form.type" placeholder="Please choose the type">
                  <SelectOption value="private">Private</SelectOption>
                  <SelectOption value="public">Public</SelectOption>
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col :span="12">
              <Form.Item label="Approver" name="approver">
                <Select v-model:value="form.approver" placeholder="Please choose the approver">
                  <SelectOption value="jack">Jack Ma</SelectOption>
                  <SelectOption value="tom">Tom Liu</SelectOption>
                </Select>
              </Form.Item>
            </Col>
            <Col :span="12">
              <Form.Item label="DateTime" name="dateTime">
                <DatePicker
                  v-model:value="form.dateTime"
                  style="width: 100%"
                  :get-popup-container="(trigger) => trigger.parentElement"
                />
              </Form.Item>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col :span="24">
              <Form.Item label="Description" name="description">
                <Input
                  v-model:value="form.description"
                  :rows="4"
                  placeholder="please enter url description"
                  type="textarea"
                />
              </Form.Item>
            </Col>
          </Row>
        </Form>
        <template #extra>
          <Space>
            <Button @click="onClose">Cancel</Button>
            <Button type="primary" @click="onClose">Submit</Button>
          </Space>
        </template>
      </Drawer>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import Button from '@sscd/button';
  import DatePicker from '@sscd/date-picker';
  import Form from '@sscd/form';
  import type { Rule } from '@sscd/form';
  import { Row, Col } from '@sscd/grid';
  import Input from '@sscd/input';
  import Select from '@sscd/select';
  import Space from '@sscd/space';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import Drawer from '@sscd/drawer';
  const form = reactive({
    name: '',
    url: '',
    owner: '',
    type: '',
    approver: '',
    dateTime: null,
    description: '',
  });
  const rules: Record<string, Rule[]> = {
    name: [{ required: true, message: 'Please enter user name' }],
    url: [{ required: true, message: 'please enter url' }],
    owner: [{ required: true, message: 'Please select an owner' }],
    type: [{ required: true, message: 'Please choose the type' }],
    approver: [{ required: true, message: 'Please choose the approver' }],
    dateTime: [{ required: true, message: 'Please choose the dateTime', type: 'object' }],
    description: [{ required: true, message: 'Please enter url description' }],
  };
  const open = ref<boolean>(false);
  const showDrawer = () => {
    open.value = true;
  };
  const onClose = () => {
    open.value = false;
  };
</script>
